<!--
/**
* Author: txj
* Date: 2023年8月18日16:30:44
* Desc: 点餐券
*/
-->
<template>
  <view class="mall-coupon">
    <view :class="listDataLength ? 'content' : ''">
      <yy-list :list="listData" :loading="listLoading" :finished="fromPage ? true : listFinished" empty-type="coupon">
        <view class="item" :class="item.isSel === '1' ? '' : 'item-unCheck'" v-for="(item, index) in listData" :key="item" @click="onSel(item, index)">
          <view class="fc3 fs34">{{ item.name }}</view>
          <view class="fc9 fs24 mt25">{{ item.expireTime }}</view>
          <view class="check" :class="item.isSel === '1' ? '' : 'no-check'"></view>
        </view>
      </yy-list>
    </view>

    <view @click="select" class="btn"> 确定选择 </view>
  </view>
</template>
<script>
  import listMixins from '@/mixins/listMixins'
  import { deDupArray } from '@/utils'
  import { locSelmallCoupon } from '@/utils/locStore/data'

  export default {
    name: 'mall-coupon',
    mixins: [listMixins],
    data() {
      return {
        cardCode: '',
        fromPage: '',
        flag: false,
        selBox: [],
        fromPath: '',
        isAutoBind: false,
        history: false,
        mallCommodityId: '',
        totalPrice: 0,
        listData: []
        // query: {}
      }
    },
    onLoad(option) {
      // #ifdef MP-WEIXIN
      if (option.autoBind) {
        this.autoBindCoupon(option.couponId)
      }
      // #endif
      this.fromPath = this.$tools.getCurrentPage().fromPath
      this.fromPage = option.fromPage || ''
      if (this.fromPage) {
        this.mallCommodityId = option.mallCommodityId || ''
        this.totalPrice = option.totalPrice || ''
      }

      this.selBox = locSelmallCoupon.get() instanceof Array ? locSelmallCoupon.get() : []
      console.log('this.selBox ', locSelmallCoupon.get())
    },
    onShow() {
      this.listLoad()
    },
    methods: {
      onloadList() {
        const query = {
          version: '2',
          isPage: '2',
          cinemaId: this.$auth.getLocCinemaInfo().cinemaId
        }
        return uni.$api.coupon.getMerchandiseCouponList(query).then((res) => {
          if (this.isLoading) {
            // 是下啦刷新 清空
            this.listData = []
          }

          let listData = []
          if (this.fromPage) {
            listData = res
          } else {
            listData = [...this.listData, ...res.list]
          }
          this.listData = deDupArray(listData, 'couponId')
          this.$nextTick(() => {
            this.onReplace()
          })
          return res
        })
      },
      onPullDownRefresh() {
        this.listRefresh()
      },
      onReachBottom() {
        this.listLoad()
      },

      onSel(item, index) {
        // if (!item.usable) {
        //   return
        // }
        // if (this.selBox && this.selBox.length > 0) {
        //   this.selBox = []
        // }

        if (item.isSel !== '1') {
          this.listData.forEach((val, idx) => {
            if (val.couponId !== item.couponId) {
              // this.$set(this.listData[idx], 'isSel', '0')
            } else {
              this.$set(this.listData[idx], 'isSel', '1')
              this.$nextTick(() => {
                this.selBox.push(item)
              })
            }
          })
        } else {
          this.$set(this.listData[index], 'isSel', '0')
          this.$nextTick(() => {
            this.selBox.splice(0, 1)
          })
        }
      },

      onReplace() {
        if (this.selBox && this.selBox.length > 0) {
          const ids = this.selBox.map((item) => item.couponId)

          this.listData.forEach((item, index) => {
            if (ids.includes(item.couponId)) {
              this.$set(this.listData[index], 'isSel', '1')
            }
          })
        }
      },
      select() {
        this.clickUse = true
        locSelmallCoupon.set(this.selBox)
        this.$tools.navigateTo(-1)
      }
    },

    computed: {
      listDataLength() {
        return this.listData.length > 0
      }
    }
  }
</script>
<style lang="scss" scoped>
  .mall-coupon {
    overflow-x: hidden;
    overflow-y: auto;
    width: 100%;
    min-height: 100vh;
    background: #f3f5f7;
    padding-bottom: 180rpx;
    .tip {
      background-color: #fdf7d7;
      color: #f8a82d;
      font-size: 24rpx;
      text-align: center;
      line-height: 60rpx;
      box-sizing: border-box;
      border-radius: 16rpx;
      height: 60rpx;
    }
    .content {
      padding: 20rpx;
      .item {
        box-sizing: border-box;
        position: relative;
        width: 100%;
        margin-top: 16rpx;
        height: 180rpx;
        background: linear-gradient(-90deg, #ecfbff 0%, #ffffff 100%);
        border-radius: 20rpx;
        display: flex;
        padding-left: 33rpx;
        flex-direction: column;
        justify-content: center;
        .check {
          width: 50rpx;
          height: 50rpx;
          position: absolute;
          top: 0;
          right: 0;
          background: url('https://public-oss-file.zmaxfilm.com/applet/img/film-oxygen-uniapp/mall-check.png') no-repeat;
          background-size: 100%;
        }
        .no-check {
          background-image: url('https://public-oss-file.zmaxfilm.com/applet/img/film-oxygen-uniapp/mall-no-check.png');
        }
      }
      .item-unCheck {
        background: #ffffff;
      }
    }

    .btn {
      position: fixed;
      bottom: 40rpx;
      width: calc(100% - 40rpx);
      left: 20rpx;
      right: 20rpx;
      height: 100rpx;
      background: linear-gradient(135deg, #55baff 0%, #23e6d8 100%);
      border-radius: 20rpx;
      line-height: 100rpx;
      text-align: center;
      color: #fff;
      font-size: 32rpx;
    }
  }
</style>
